<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>图片展示页</title>
	<css file="__STATIC__/css/global.css">
	<jquery />
	<jsconst />
	<js file="__STATIC__/js/slides.min.jquery.js"></script>
	<script>
		$(function(){
			$('#slides').slides({
				preload: true,
				preloadImage: '__STATIC__/images/ui1/loading.gif',
				play: 5000,
				pause: 2500,
				hoverPause: true,
				animationStart: function(current){
					$('.caption').animate({
						bottom:-35
					},100);
					if (window.console && console.log) {
						// example return of current slide number
						console.log('animationStart on slide: ', current);
					};
				},
				animationComplete: function(current){
					$('.caption').animate({
						bottom:0
					},200);
					if (window.console && console.log) {
						// example return of current slide number
						console.log('animationComplete on slide: ', current);
					};
				},
				slidesLoaded: function() {
					$('.caption').animate({
						bottom:0
					},200);
				}
			});
		});
	</script>
</head>
<body>
	<p style="font-size:24px;margin-left:50px;">请尽量选择大图，图片太小的话可能会变形</p>
	<div id="container">
		<div id="example">
			<img src="__STATIC__/images/ui1/new-ribbon.png" width="112" height="112" alt="New Ribbon" id="ribbon">
			<div id="slides">
				<div class="slides_container">
					
				<list from="$row" name="$list">
					<div class="slide">
					<img src="__ROOT__/{$list.thumb}" />
						<div class="caption" style="bottom:0">
							<p>Happy Bokeh Thursday!</p>
							</div>
						</div>
						</list>
					
				</div>
				<a href="#" class="prev"><img src="__STATIC__/images/ui1/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
				<a href="#" class="next"><img src="__STATIC__/images/ui1/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
			</div>
			<img src="__STATIC__/images/ui1/example-frame.png" width="739" height="341" alt="Example Frame" id="frame">
		</div>
		<div id="footer">
			<p>For full instructions go to <a href="http://slidesjs.com" target="_blank">http://slidesjs.com</a>.</p>
			<p>Slider design by Orman Clark at <a href="http://www.premiumpixels.com/" target="_blank">Premium Pixels</a>. You can donwload the source PSD at <a href="http://www.premiumpixels.com/clean-simple-image-slider-psd/" target="_blank">Premium Pixels</a></p>
			<p>&copy; 2010 <a href="http://nathansearles.com" target="_blank">Nathan Searles</a>. All rights reserved. Slides is licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache license</a>.</p>
		</div>
	</div>
</body>
</html>
